import React, { useState } from 'react'
import {
    View,
    Text,
    ImageBackground,
    StyleSheet,
    Image,
    TouchableOpacity,
    ScrollView,
    TextInput
} from 'react-native'

import '../../common/global'

import Icon from 'react-native-vector-icons/MaterialCommunityIcons'
import { AsyncStorage } from 'react-native';
import {
    useFocusEffect,
} from '@react-navigation/native';


const GetComment = ({ navigation, route }) => {
    //获得传来的动态id
    const [value, onChangeText] = React.useState('');
    const [list, setList] = useState([]);
    let helpList = [];


    //获取保存的评论数组
    const getData = async () => {
        let data = await AsyncStorage.getItem('dongComments');
        data = JSON.parse(data);
        return data;
    }

    useFocusEffect(
        React.useCallback(() => {
            async function open() {
                await getData().then((res) => {
                    //判断是否为数组
                    if (res.__proto__.constructor == Array) {
                        return res;
                    } else {
                        return [];
                    }
                }).then((res) => {
                    if (res.length == 0) {
                        return;
                    } else {
                        //获得该动态下的数组
                        helpList = [...res];
                        let help = [];
                        for(let i=0;i<helpList.length;i++){
                            help = [...helpList[i].list,...help]
                        }

                        setList(help);
                    }

                })
            }

            open();
            return () => {
            }
        }, []))


    return (
        <View style={{ flex: 1, backgroundColor: 'white', height: h, position: 'relative' }}>
            <ScrollView style={{ flex: 1, backgroundColor: 'white' }}>
                {
                    list.map((item, key) => {
                        return (
                            <View key={key} id={item.id} style={{ marginTop: 15, backgroundColor: 'white', borderBottomWidth: 1, borderColor: 'rgb(234,234,234)' }}>
                                <View style={styles.part1} >
                                    <Image style={styles.avatar} resizeMode="stretch" source={item.pic} />
                                    <Text id="name" style={styles.name}>{item.name}</Text>
                                </View>
                                <View style={styles.part2}>
                                    <Text id="article" style={styles.article}>{item.shenP}</Text>
                                </View>

                                <View style={{ display: 'flex', flexDirection: 'row', justifyContent: 'flex-end' }}>

                                    <View style={{ display: 'flex', flexDirection: 'row', justifyContent: 'center', alignItems: 'center', marginLeft: 14, marginRight: 20, marginBottom: 8 }}>
                                        <Icon name={item.isLike ? 'arrow-up-thick' : 'arrow-up-bold-outline'} size={36} />
                                        <Text style={{ fontSize: 18, marginLeft: 6, color: 'black' }}>{item.good}</Text>
                                    </View>
                                </View>

                            </View>

                        )
                    })
                }
            </ScrollView>
        </View>
    )
}
const styles = StyleSheet.create({
    container1: {
        flex: 1,
    },
    contentFindView: {
        height: 50,
        width: 50,
        position: 'absolute',
        left: 390,
        top: 650,
        opacity: 0.5
    },
    bestCom: {
        width: 80,
        backgroundColor: '#FF7A87',
        flexDirection: 'row',
        alignItems: 'center',
        borderRadius: 20,
        paddingLeft: 3,
        marginBottom: 10
    },
    face: {
        color: '#FDE702'
    },
    container: {
        flex: 1,
        margin: 0,
        padding: 0,
        backgroundColor: '#eee',
    },
    part1: {
        paddingLeft: 20,
        paddingTop: 16,
        paddingBottom: 8,
        flexDirection: 'row',
        alignItems: 'center',
        borderRadius: 10
    },
    part2: {
        paddingTop: 8,
        paddingLeft: 20,
        paddingBottom: 8,
        flexDirection: 'row',
        alignItems: 'center',
        backgroundColor: '#fff'
    },
    part3: {
        width: '90%',
        paddingLeft: 20,
        paddingTop: 8,
        paddingBottom: 8,
        flexDirection: 'row',
        flexWrap: 'wrap',
        justifyContent: 'center',
        backgroundColor: '#fff'
    },
    part4: {
        width: '90%',
        backgroundColor: '#F5F5F7',
        marginTop: 20,
        marginBottom: 20,
        padding: 10,
        // borderTopRightRadius:20,
        // borderTopLeftRadius:20,
        marginLeft: '5%',
        borderRadius: 10
    },
    part41: {
        // backgroundColor:'blue',
        flexDirection: 'row',
        alignItems: 'center',
    },
    part42: {
        // backgroundColor:'blue',
        flexDirection: 'row',
        alignItems: 'center',
    },
    part43: {
        width: '100%',
        flexDirection: 'row',
        flexWrap: 'wrap',
        paddingTop: 20,
        justifyContent: 'center'
    },
    arrowup: {
        color: '#3C94CD',
        marginLeft: 10
    },
    arrowdown: {
        color: '#3C94CD',
        marginLeft: 6
    },
    avatar: {
        // backgroundColor:'blue', 
        width: 40,
        height: 40,
        borderRadius: 200
    },
    name: {
        marginLeft: ptd(12),
        fontSize: 19,
        color: '#5A5B5F'
    },
    article: {
        fontSize: 20,
        width: '95%'
    },
    article1: {
        fontSize: 18,
        width: '100%'
    },
    conImg: {
        //backgroundColor:'yellow',
        width: 145,
        height: 145,
        borderRadius: 8,
        marginRight: 6,
        marginBottom: 3,
        borderColor: '#ddd',
        borderWidth: 1
    },
    txtBox: {
        width: '100%',
        height: 40,
        marginBottom: 5,
        backgroundColor: '#F5F5F7',
        flexDirection: 'row'
    },
    txtInput: {
        width: '85%',
        backgroundColor: '#fff',
        borderRadius: 20,
        marginLeft: 5,
    },
    txtBtn: {
        width: 45,
        height: 30,
        backgroundColor: 'skyblue',
        marginTop: 5,
        marginLeft: 5,
        borderRadius: 10,
    },
    btnTxt: {
        textAlign: "center",
        lineHeight: 30,
        color: '#fff',
        fontSize: 18
    }
})

export default GetComment
